<!DOCTYPE html>

<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 35px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }


    .allCheck {
      width: 80px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    const checkAll = document.querySelector('#checkAll')
    const cks = document.querySelectorAll('.ck')
    //给全选按钮添加click事件
    checkAll.addEventListener('click',function(){
      cks.forEach(item => item.checked = this.checked)
    })
    cks.forEach(item =>{
      item.addEventListener('click',function(){
        checkAll.checked = Array.from('cks').every(item => item.checked === true)
      })
    })

    // // 添加全选按钮的change事件
    // checkAll.addEventListener('change',function(){
    //   //让小选按钮的选中效果跟着全选按钮走
    //   //当全选按钮的选中状态发生变化，小选按钮也要跟着发生变化
    //   cks.forEach(item => item.checked = this.checked)
    // })
    // // 功能2：当选中所有的小选按钮时，全选按钮也要选中，只要有一个小选按钮没有选中，全选按钮也不要选中
    // cks.forEach( item=>{
    //   item.addEventListener('change',function(){
        
    //     //先将伪数组cks转换为真数组
    //     // const checks = Array.from(cks)
    //     //调用真数组的every方法判断是不是每一个小选按钮都被选中
    //     // const result = checks.every(item => item.checked === true)
    //     //让全选按钮的选中效果设置为every的判断结果
    //     // checkAll.checked = result

    //     //简写
    //     checkAll.checked = Array.from(cks).every(item => item.checked === true)
    //   })
    // })
  </script>
</body>

</html>